﻿@model  HomeCareLibrary.Models.questionsModel
@if (Model != null)
{
    ViewBag.Title = "Questions";

    ViewBag.Description = Model.qa_topic_meta_desc;
    ViewBag.Keywords = Model.qa_topic_meta_key;
}
<div class="col-lg-9 col-sm-9 right_part">

    <div class="title clearfix">
        <h1>Home Care Library</h1>
        <div class="head-searchbox">
            <button class="search_go" type="submit"></button>
            <input type="text" class="form-control" id="Search" placeholder="Search">
        </div>

        <div id="accordion" class="panel-group library-accordion">
            <div class="panel panel-default">
                <div class="panel-heading1">
                    <div id='flyout_menu'>
                        <h4 class="panel-title library ">
                            @Html.Action("menu", "Home")
                        </h4>
                    </div>
                </div>

            </div>

        </div>
    </div>
    @if (Model != null)
    {
        <h3  id="heading1" class="head-tittle">@Model.Feature_name</h3>
        <div class="media_tab">
            <ul class="nav nav-tabs" id="myTab">
                <li><a class="overview_icon ui-link aOverview" id="aOverview" data-name="@Model.Feature_name.Trim().Replace(" ", "-").ToLower()" href="javascript:void(0);"></a></li>
                <li><a class="routine_icon ui-link aCare" id="aCare" href="javascript:void(0);" data-name="@Model.Feature_name.Trim().Replace(" ", "-").ToLower()" data-task="@Model.rc_task_content.Trim().Replace(" ", "-").ToLower()"></a></li>
                <li class="active"><a class="q_a_icon ui-link aQuestions" id="aQuestions" href="javascript:void(0)" data-name="@Model.Feature_name.Trim().Replace(" ", "-").ToLower()" data-task="@Model.qa_topic.Trim().Replace(" ", "-").ToLower()"></a></li>
                <li ><a class="articles_icon ui-link aArticles" id="aArticles"  data-name="@Model.Feature_name.Trim().Replace(" ", "-").ToLower()" href="javascript:void(0)"></a></li>
            </ul>
        </div>
        <div class="main-content" id="myTabContent">
            <div class="main-content-inn">
                <div class="content-tab">

                    <div class="tab-content">
                        <div class="qa_page">
                            <div class="media_rc top-panel white-box">
                                <div class="clearfix">
                                    <div class="row">
                                        <div class="col-md-6 col-sm-6 ">
                                            <span class="in_title marginTitle">Question Topic #@Model.qa_topic_order</span>
                                            <div class="right_rc"></div>
                                            <p class="smells">@Model.qa_topic</p>
                                            <div class="topic">
                                                <span class="droptext">There are @Model.listQ_AContent.Count other topics</span>
                                                <div class="dropdown">
                                                    <a href="#" data-toggle="dropdown" class="btn-small down_arrow"></a>
                                                    <ul id="menu2" class="dropdown-menu" role="menu" aria-labelledby="drop5">
                                                        @foreach (var item in Model.listQ_AContent)
                                                        {<li role="presentation"><a role="menuitem" tabindex="-1" href="@Url.Action("questions", "Home", new { id = Model.Feature_name.Trim().Replace(" ", "-").ToLower(), featureID = item.qa_topic.Trim().Replace(" ", "-").ToLower() })">@item.qa_topic</a></li>
                                                    
                                                        }
                                                    </ul>
                                                </div>
                                            </div>
                                            <br>
                                            <p>
                                                @Model.qa_topic_intro
                                            </p>
                                        </div>
                                        <div class="col-md-6 col-sm-6 pull-right qa-11mg">
                                            <br>
                                            <br>
                                            <span class="rightimg">
                                                <img class="img-responsive" src="@Model.qa_image_url" title="" alt="@Model.qa_image_url" ></span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="media-group">
                            @foreach (var item in Model.listQ_A)
                            {
                                if (item.qa_followon_order == 0)
                                {
                                    <div class="ques-full">
                                
                                    <div class="media qa-ques-media">

                                        <img src="@Url.Content("~/images/profile_icon.png")" alt="" class="media-object pull-left">

                                        <div class="media-body">
                                            <div class="media-body-inn">
                                                @{
                                    string[] name = item.qa_question.Split(new string[] { "<br /><br />" }, StringSplitOptions.None);
                                
                                                    <h4 class="media-heading">@name[0]</h4>
                                                    <span></span>
                                                    <p>@name[1]</p>
                                                    <span></span> }
                                            </div>
                                        </div>
                                    </div>
                                
                                    
                                
                                    <div class="media">

                                        <img class="media-object pull-left" alt="" src="@Url.Content("~/images/home-icon-44x44.gif")">

                                        <div class="media-body ">
                                            <div class="media-body-inn media-body2">
                                                @{
                                    string[] ans = item.qa_answer.Split(new string[] { "<br /><br />" }, StringSplitOptions.None);
                                
                                                    <h4 class="media-heading">@ans[0]</h4>
                                                    <span></span>
                                                    <p>@ans[1]</p>
                                                    <span></span> }
                                            </div>
                                        </div>
                                    </div></div>
                                
                                }
                                else
                                {
                                    <div class="qa-ques-inn">
                                   @if (item.qa_question != null)
                                    {
                                <div class="media qa-ques-media">
                                    <img src="@Url.Content("~/images/profile_icon.png")" alt="" class="media-object pull-left">
                                    <div class="media-body ">
                                        <div class="media-body-inn">
                                            @{string[] name1 = item.qa_question.Split(new string[] { "<br /><br />" }, StringSplitOptions.None);
                                
                                                <h4 class="media-heading">@name1[0]</h4>
                                                <span></span>
                                                <p>@name1[1]</p>
                                                <span></span> }
                                        </div>
                                    </div>
                                </div>
                                    }
                                <div class="media">
                                    <img src="@Url.Content("~/images/home-icon-44x44.gif")" alt="" class="media-object pull-left" >
                                    <div class="media-body ">
                                        <div class="media-body-inn media-body2">
                                            @{
                                    string[] name2 = item.qa_answer.Split(new string[] { "<br /><br />" }, StringSplitOptions.None);
                                
                                                <h4 class="media-heading">@name2[0]</h4>
                                                <span></span>
                                                <p>@name2[1]</p>
                                                <span></span> }
                                        </div>
                                    </div>
                                </div>
                                        </div>
                                }
                            }
</div>
                            <div class="other-task">
                                <span class="in_title marginTitle">Other Topics</span>
                                <ul class="list-unstyled">
                                    @{
                            int counter = 2;
                            foreach (var item in Model.listQ_AContent)
                            {  <li><span class="pull-left">Task # @counter:</span> <b>@item.qa_topic <a href="@Url.Action("questions", "Home", new { id = Model.Feature_name.Trim().Replace(" ", "-").ToLower(), featureID = item.qa_topic.Trim().Replace(" ", "-").ToLower() })" class="ui-link">
                                <img src="@Url.Content("~/images/other_right_arrow.png")"></a></b></li>
                                counter++;
                            }
                                    }

                                </ul>
                            </div>
                            <div class="qa_form">
                                <div class="qafrom_title">Welcome<small> <b>Alfred DeRose</b></small></div>
                                <br>
                                <p>
                                    If you have been signed up with Home Wizard for at least 3 months, then type your 
                        question below. We'll send you an answer usually within 48 hours.
                                </p>
                                <div class="form_data">
                                    <form class="form-horizontal">
                                        <div class="form-group">
                                            <label class="col-lg-3 control-label" for="inputEmail1">Your Question:</label>
                                            <div class="col-lg-8">
                                                <textarea class="form-control" data-role="none" rows="" cols="" name=""></textarea>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-lg-3 control-label" for="inputEmail1">From: </label>
                                            <div class="col-lg-8">
                                                <input type="email" id="exampleInputEmail1" class="form-control txt-box">
                                                <button class="btn btn-default" data-role="none" type="button">Submit</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

            </div>
            <div class="bottom_main">
                <h4 id="heading2">@Model.Feature_name</h4>
                 <div class="menu_link"><a data-name="@Model.Feature_name.Trim().Replace(" ", "-").ToLower()" href="javascript:void(0);" class="ui-link aOverview">Overview</a>|<a href="javascript:void(0)" data-name="@Model.Feature_name.Trim().Replace(" ", "-").ToLower()" data-task="@Model.rc_task_content.Trim().Replace(" ", "-").ToLower()" class="ui-link aCare">Routine Care</a>|<a href="javascript:void(0);" data-name="@Model.Feature_name.Trim().Replace(" ", "-").ToLower()" data-task="@Model.qa_topic.Trim().Replace(" ", "-").ToLower()" class="ui-link aQuestions">Q &amp; A</a>|<a data-name="@Model.Feature_name.Trim().Replace(" ", "-").ToLower()" href="javascript:void(0)" class="ui-link aArticles">Articles</a> </div>
            </div>
            <div class="title_btm">
                <h2>Home Care Library</h2>
                <div class="panel-title library ">
                    <a class="accordion-toggle collapsed" href="@Url.Action("Index", "Home")">
                        <img src="@Url.Content("~/images/explore-library.png")" class="img-responsive">
                    </a>
                </div>
                <div class="head-searchbox">
                    <button type="submit" class="search_go"></button>
                    <input type="text" placeholder="Search" id="Search" class="form-control">
                </div>
            </div>
        </div>
    }
</div>
<script>
    $(".aOverview").live("click", function () {
        $("#wait").show();
        $("#myTab").show();
        $("#heading1").show();
        var ID = $(this).attr("data-name");
        var str = ID.replace(/\-/g, ' ').toLowerCase().replace(/\b[a-z]/g, function (letter) {
            return letter.toUpperCase();
        });
        $("#heading1").html(str);
        window.history.pushState("", "Title", "/" + ID + "/overview");
        document.title = "Overview";
        jQuery.ajax({
            url: "@Url.Action("overview", "Home")", type: "POST", traditional: true,
            data: { 'id': ID },
            success: function (data) {
                jQuery('#myTabContent').html('')
                jQuery("#myTabContent").html(data);
                $("#heading2").html(str);
                $("#wait").hide();
            }
        })
    });
    $(".aCare").live("click", function () {
        $("#wait").show();
        var ID = $(this).attr("data-name");
        var task = $(this).attr("data-task");
        var str = ID.replace(/\-/g, ' ').toLowerCase().replace(/\b[a-z]/g, function (letter) {
            return letter.toUpperCase();
        });
        $("#heading1").html(str);
        window.history.pushState("", "Title", "/" + ID + "/care/" + task);
        document.title = "Routine";
        jQuery.ajax({
            url: "@Url.Action("care", "Home")", type: "POST", traditional: true,
            data: { 'id': ID, 'featureID': task },
            success: function (data) {
                jQuery('#myTabContent').html('')
                jQuery("#myTabContent").html(data);
                $("#heading2").html(str);
                $("#wait").hide();
            }
        })
    });
    $(".care").live("click", function () {
        $("#wait").show();
        var ID = $(this).attr("data-name");
        var task = $(this).attr("data-task");
        var str = ID.replace(/\-/g, ' ').toLowerCase().replace(/\b[a-z]/g, function (letter) {
            return letter.toUpperCase();
        });
        $("#heading1").html(str);
        window.history.pushState("", "Title", "/" + ID + "/care/" + task);
        document.title = "Routine";
        jQuery.ajax({
            url: "@Url.Action("care", "Home")", type: "POST", traditional: true,
            data: { 'id': ID, 'featureID': task },
            success: function (data) {
                jQuery('#myTabContent').html('')
                jQuery("#myTabContent").html(data);
                $("#heading2").html(str);
                $("#wait").hide();
            }
        })
    });
    $(".aQuestions").live("click", function () {
        $("#wait").show();
        var ID = $(this).attr("data-name");
        var task = $(this).attr("data-task");
        var str = ID.replace(/\-/g, ' ').toLowerCase().replace(/\b[a-z]/g, function (letter) {
            return letter.toUpperCase();
        });
        $("#heading1").html(str);
        window.history.pushState("", "Title", "/" + ID + "/questions/" + task);
        document.title = "Questions";
        jQuery.ajax({
            url: "@Url.Action("questions", "Home")", type: "POST", traditional: true,
            data: { 'id': ID, 'featureID': task },
            success: function (data) {
                jQuery('#myTabContent').html('')
                jQuery("#myTabContent").html(data);
                $("#heading2").html(str);
                $("#wait").hide();
            }
        })
    });
    $(".questions").live("click", function () {
        $("#wait").show();
        var ID = $(this).attr("data-name");
        var task = $(this).attr("data-task");
        var str = ID.replace(/\-/g, ' ').toLowerCase().replace(/\b[a-z]/g, function (letter) {
            return letter.toUpperCase();
        });
        $("#heading1").html(str);
        window.history.pushState("", "Title", "/" + ID + "/questions/" + task);
        document.title = "Questions";
        jQuery.ajax({
            url: "@Url.Action("questions", "Home")", type: "POST", traditional: true,
            data: { 'id': ID, 'featureID': task },
            success: function (data) {
                jQuery('#myTabContent').html('')
                jQuery("#myTabContent").html(data);
                $("#heading2").html(str);
                $("#wait").hide();
            }
        })
    });
    $(".aArticles").live("click", function () {
        $("#wait").show();
        var ID = $(this).attr("data-name");
        var str = ID.replace(/\-/g, ' ').toLowerCase().replace(/\b[a-z]/g, function (letter) {
            return letter.toUpperCase();
        });
        $("#heading1").html(str);
        window.history.pushState("", "Title", "/" + ID + "/articles/");
        document.title = "Articles";
        jQuery.ajax({
            url: "@Url.Action("articles", "Home")", type: "POST", traditional: true,
            data: { 'id': ID },
            success: function (data) {
                jQuery('#myTabContent').html('')
                jQuery("#myTabContent").html(data);
                $("#heading2").html(str);
                $("#wait").hide();
            }
        })
    });
    $(".articles").live("click", function () {
        $("#wait").show();
        $("#myTab").hide();
        var ID = $(this).attr("data-name");
        var task = $(this).attr("data-task");
        var str = ID.replace(/\-/g, ' ').toLowerCase().replace(/\b[a-z]/g, function (letter) {
            return letter.toUpperCase();
        });
        $("#heading1").hide();
        window.history.pushState("", "Title", "/" + ID + "/articles/" + task);
        document.title = "Articles";
        jQuery.ajax({
            url: "@Url.Action("articles", "Home")", type: "POST", traditional: true,
            data: { 'id': ID, 'featureID': task },
            success: function (data) {
                jQuery('#myTabContent').html('')
                jQuery("#myTabContent").html(data);
                $("#heading2").html(str);
                $("#wait").hide();
                $("#myTab>li:first").addClass('active').siblings().removeClass('active')

            }
        })
    });

</script>